<!-- 操作员报表 -->
<template>
   <div class="app-container">
      <el-form label-width="100px" :model="queryParams" ref="queryForm" size="small" :inline="true">
         <el-form-item label="经销商编号" prop="disCode">
            <el-input v-model="queryParams.disCode" placeholder="请输入经销商编号" clearable style="width: 240px"
               @keyup.enter.native="handleQuery" />
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
      </el-form>
      <el-table height="62vh" v-loading="loading" border :data="operatorList">
         <el-table-column fixed label="序号" type="index" width="55" align="center" />
         <el-table-column
            align="center"
            v-for="(item,index) in columnDefs"
            :key="index"
            :label="item.headerName"
            :prop="item.field"
            :width="item.width"
         >
            <template v-if="item.child && item.child.length" >
               <el-table-column
                  align="center"
                  v-for="(ite,inde) in item.child"
                  :key="inde"
                  :label="ite.headerName"
                  :prop="ite.field"
                  :width="ite.width"
               >
               </el-table-column>

            </template>
         </el-table-column>
         <el-table-column
            fixed="right"
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
         >        
            <template slot-scope="scope">
               <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="dialog_echarts(scope.row)"
               >查看</el-button>
            </template>
         </el-table-column>
      </el-table>
      <div class="usage_statistics" id="usage_statistics">
      </div>
      <el-dialog
         width="40%"
         :title="title" 
         :close-on-click-modal="false" 
         :close-on-press-escape="false" 
         :visible.sync="is_echarts" 
         @close="echarts_close" 
      >
         <div class="dialog_echarts" id="dialog_echarts">
         </div>
         <div slot="footer" class="dialog-footer">
            <el-button size="mini" type="primary" @click="is_echarts=false">关闭</el-button>
         </div>
      </el-dialog>
   </div>
</template>

<script>
import * as echarts from 'echarts';
import { operatorLogStat } from "@/api/base/operatorReport";
export default {
   name: 'operatorReport',
   data() {
      return{
         loading: true,
         queryParams: {
            disCode:''
         },
         operatorList: [],
         columnDefs: [
            {headerName: '经销商编号', field: 'disCode', width: "150"},
            {headerName: '经销商名称', field: 'disName', width: "300"},
            {headerName: '操作员数量', field: 'qty', width: "150"},
            {headerName: '第一周', child:[
               {headerName: '操作次数', field: 'firstQty', width: "150"},
               {headerName: '操作时长', field: 'firstDuration', width: "150"}
            ]},
            {headerName: '第二周', child:[
               {headerName: '操作次数', field: 'secondQty', width: "150"},
               {headerName: '操作时长', field: 'secondDuration', width: "150"}
            ]},
            {headerName: '第三周', child:[
               {headerName: '操作次数', field: 'thridQty', width: "150"},
               {headerName: '操作时长', field: 'thridDuration', width: "150"}
            ]},
            {headerName: '第四周', child:[
               {headerName: '操作次数', field: 'fourthQty', width: "150"},
               {headerName: '操作时长', field: 'fourthDuration', width: "150"}
            ]},
         ],
         title: '',
         is_echarts: false,
      }
   },
   methods:{
      echarts_close(){
         this.is_echarts = false
      },
      dialog_echarts(row){//查看
         this.is_echarts = true
         this.title = row.disName
                  
         console.log(row);
         let firstQty = 0, secondQty = 0, thridQty = 0, fourthQty = 0
         firstQty += (row.firstQty - 0)
         secondQty += (row.secondQty - 0)
         thridQty += (row.thridQty - 0)
         fourthQty += (row.fourthQty - 0)
         let data = [firstQty,secondQty,thridQty,fourthQty]
         this.$nextTick(()=>{
            this.setEcharts(data,row)
         })
         
      },
      setEcharts(data,row){
         console.log(row.disName);
         
         let myChart = echarts.init(document.getElementById('dialog_echarts'));
         console.log(myChart);
         let option={
            title: {
               text: row.disName,
               left: 'center'
            },
            color: ['#5074f3'],
            grid:{
               left:'5%',
               top:'15%',
               bottom:'15%',
               right:'4%'
            },
            tooltip: {
               trigger: 'axis',
               axisPointer:{
                  type:'shadow'
               }
            },
            legend: {
               bottom: "0%"
            },
            xAxis: {
               // boundaryGap: false, //设置是否挨着y轴开始
               data: ['第一周', '第二周', '第三周', '第四周'],
               axisTick: {
                  alignWithLabel: true
               },
            },
            yAxis: {
               type: 'value'
            },
            series: [
               {
                  name: row.disName,
                  type: 'bar',
                  data: data,
                  barWidth:'55%',
                  smooth: true,
                  symbol: 'none',
                  label: {
                     show: true,
                     position: 'top'
                  },                  
                  // itemStyle : {  
                  //    normal : {
                  //       color:'#ffc000',
                  //       lineStyle:{  
                  //          color:'#ffc000'
                  //       }  
                  //    }  
                  // },  
               },
            ]
         }

         myChart.setOption(option);

         window.addEventListener("resize", function () {
            myChart.resize();
         });

      },
      initialize(data){
         let myChart = echarts.init(document.getElementById('usage_statistics'));
         console.log(myChart);
         let option={
            title: {
               text: '经销商使用次数统计',
               left: 'center'
            },
            color: ['#5074f3'],
            grid:{
               left:'5%',
               top:'15%',
               bottom:'15%',
               right:'4%'
            },
            tooltip: {
               trigger: 'axis',
               axisPointer:{
                  type:'shadow'
               }
            },
            legend: {
               bottom: "0%"
            },
            xAxis: {
               // boundaryGap: false, //设置是否挨着y轴开始
               data: ['第一周', '第二周', '第三周', '第四周'],
               axisTick: {
                  alignWithLabel: true
               },
            },
            yAxis: {
               type: 'value'
            },
            series: [
               {
                  name: '合计',
                  type: 'line',
                  data: data,
                  barWidth:'55%',
                  smooth: true,
                  symbol: 'none',
                  label: {
                     show: true,
                     position: 'top'
                  },                  
                  itemStyle : {  
                     normal : {
                        color:'#ffc000',
                        lineStyle:{  
                           color:'#ffc000'
                        }  
                     }  
                  },  
               },
            ]
         }

         myChart.setOption(option);

         window.addEventListener("resize", function () {
            myChart.resize();
         });
      },
      /** 搜索按钮操作 */
      handleQuery() {
         this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
         this.resetForm("queryForm");
         this.handleQuery();
      },
      getList(){
         this.loading = true;
         operatorLogStat(this.addDateRange(this.queryParams)).then((result) => {
            this.operatorList = result.data
            this.loading = false
            let firstQty = 0, secondQty = 0, thridQty = 0, fourthQty = 0
            result.data.forEach((item)=>{
               firstQty += (item.firstQty - 0)
               secondQty += (item.firstQty - 0)
               thridQty += (item.firstQty - 0)
               fourthQty += (item.firstQty - 0)
            })
            
            this.initialize([firstQty,secondQty,thridQty,fourthQty])
         }).catch((err) => {
            
         });
      },
   },
   mounted(){
      
   },
   created(){
      this.getList()
   }
}
</script>

<style lang="less">
.operatorReport{
}
   .usage_statistics{
      width: 100%;
      height: 360px;
      margin: 100px 0;

   }
   .dialog_echarts{
      width: 100%;
      height: 360px;
      // margin: 100px 0;

   }
</style>